<template>
	<view class="">
		<commonHeader :showBack="true" :navigationBarStyle="{iconText:'我的订单'}" @getHeight="getHeight">
		</commonHeader>
		<view class="page-content" :style="{'padding-top': lineHeight + 88 + 'rpx'}">
			<view class="tabs" :style="{'top': lineHeight + 'rpx'}">
				<u-tabs :list="orderTabs" @click="changeTabs" lineColor="#FB625D" lineWidth="30" :activeStyle="{
			         color: '#333',
					 fontWeight:'500',
					 fontSize: '14px',
			     }" :inactiveStyle="{
					color: '#666',
					fontSize: '14px',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 48px;">
				</u-tabs>
			</view>
			<template v-if="list.length">
				<view class="order-detail" v-for="item in list" @click="pushOrderDetail(item)">
					<view class="justify-between align-center top">
						<view class="tag-title">
							{{item.shopName}}
						</view>
						<view class="status">
							线下支付
						</view>
					</view>
					<view class="content center">
						<view class="item align-start justify-between" v-for="sku in item.skus">
							<view class="item-left item-title">
								{{sku.productName}}
							</view>
							<view class="item-center-one">
								{{sku.value}}
							</view>
							<view class="align-start justify-between" style="flex: 1;">
								<view class="item-center-two">
									x{{sku.number}}
								</view>
								<view class="item-right" style="line-height: 40rpx;">
									¥{{sku.price}}
								</view>
							</view>

						</view>

						<view class="item align-center justify-between" style="padding-top: 20rpx;">
							<view class="item-time">
								{{item.createTime}}
							</view>
							<view class="item-total-name">
								合计：
							</view>
							<view class="item-right" style="color: #E86C64;">
								¥{{item.total}}
							</view>
						</view>
					</view>
				</view>
				<view class="load-more" v-if="list.length >= total">
					已经到底啦~
				</view>
			</template>
			<template v-else>
				<view class="no-data">
					<img src="/static/icon/shopCar/pic_wushuju@2x.png" alt="">
					<view class="" style="font-size: 30rpx;">
						还没有 <span style="font-weight: 500;">{{orderTabs[state].value}}</span> 的订单～
					</view>
				</view>
			</template>
		</view>
		<view class="total">
			<view class="order-button align-center justify-between">
				<view class="left">
					所有商家
				</view>
				<view style="flex: 10;"></view>
				<u-checkbox-group v-model="allBussiness" placement="column" @change="groupChange">
					<u-checkbox :name="1">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				count: 0,
				showCoupon: false,
				showOrderSuccessfullyModal: false,
				list: [],
				getSettlement: null,
				orderId: '',
				state: 0,
				total: 0,
				orderTabs: [{
					name: '处理中',
					value: '处理中',
				}, {
					name: '待支付',
					value: '待支付',
				}, {
					name: '待发货',
					value: '待发货',
				}, {
					name: '待收货',
					value: '待收货',
				}, {
					name: '已完成',
					value: '已完成',
				}, ],
				allBussiness: 0,
				page: 1,
				pageSize: 10,
				systemsHeight: {},
				lineHeight: 0
			}
		},
		onLoad(e) {
			console.log(e, 'e.orderId');
			this.getAll().then(res => {
				this.orderTabs[this.state].name = this.orderTabs[this.state].name + `(${this.total})`
			})
		},
		created() {

		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
				ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
				ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
			}
			// 底部tabBar的高度
			systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems
				.ktxWindowHeight // 底部tabBar的高度
			this.lineHeight = systems.ktxStatusHeight + 84;
		},
		methods: {
			async getAll() {
				await this.$http.get("order/getAll", {
					state: this.state,
					page: this.page,
					pageSize: this.pageSize,
				}).then(res => {
					const list = res.list
					list.forEach(item => {
						item.total = 0
						item.skus.forEach(sku => {
							item.total = sku.total + item.total
						})
					})
					this.list = this.list.concat(...list)
					this.total = res.total
					console.log(this.list, '123');
					console.log(this.list.length, '123');
				})
			},

			groupChange(e) {
				console.log(this.allBussiness);
				if (this.allBussiness == 1) {
					this.allBussiness = 0
				} else {
					this.allBussiness = 1
				}
			},
			changeTabs(e) {
				console.log(e);
				this.state = e.index
				console.log(this.orderTabs[this.state].value);
				this.page = 0
				this.list = []
				this.getAll().then(res => {
					this.setOrderTabs()
					this.orderTabs[this.state].name = this.orderTabs[this.state].name + `(${this.total})`
				})
			},
			setOrderTabs() {
				this.orderTabs = [{
					name: '处理中',
					value: '处理中',
				}, {
					name: '待支付',
					value: '待支付',
				}, {
					name: '待发货',
					value: '待发货',
				}, {
					name: '待收货',
					value: '待收货',
				}, {
					name: '已完成',
					value: '已完成',
				}, ]
			},
			pushOrderDetail(item) {
				console.log(item, 'submitData');
				uni.navigateTo({
					url: '/pages/order/orderDetail?orderId=' + item.orderId,
				});
			},
		},
		onReachBottom() {
			this.page++
			this.getAll()
		},
		getHeight(value) {
			this.systemsHeight = value
			console.log(this.systemsHeight, 'this.systemsHeight');
		}
	};
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		padding-bottom: 200rpx;
		padding-top: 90rpx;
		background: #fff;
	}

	.tabs {
		position: fixed;
		top: 54px;
		width: 100%;
		background: #fff;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1800);
	}

	.order-detail {
		width: 670rpx;
		margin: 35rpx 40rpx 30rpx 40rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
		background: #FFFFFF;

		.top {
			border-bottom: 1px solid #eee;
			height: 92rpx;
			line-height: 90rpx;
			margin: 0 20rpx;

			.tag-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-left: 20rpx;
			}

			.status {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 20rpx;
				width: 120rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				background: #F8635D;
				border-radius: 4rpx;
			}
		}

		.center {
			padding: 29rpx;

			.item {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 49rpx;
				// height: 49rpx;

				.item-left {
					color: #666;
					width: 280rpx;
				}

				.item-title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.item-center-one {
					font-size: 28rpx;
					width: 110rpx;
					margin: 0 20rpx 0 10rpx;
					word-break: break-all;
				}

				.item-center-two {
					font-size: 30rpx;
					padding-right: 43rpx;
				}

				.item-right {
					font-size: 36rpx;
				}

				.item-time {
					width: 390rpx;
					font-size: 28rpx;
					font-family: SF UI Text;
					font-weight: 400;
					color: #999999;
				}

				.item-total-name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.item-border {
				height: 1rpx;
				background: #999999;
				opacity: 0.2;
			}
		}

		.bottom {
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.bottom-total {
				margin: 0 27rpx;

				span:first-child {
					color: #666666;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}

				span:last-child {
					font-size: 36rpx;
					font-weight: 400;
					color: #E86C64;
				}
			}

		}
	}

	.total {
		position: fixed;
		bottom: 0rpx;
		// height: 280rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 999;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1800);

		.order-button {
			height: 110rpx;
			margin-right: 31rpx;

			.left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 51rpx;
			}
		}
	}

	/deep/ .u-number-box__input {
		width: 100rpx !important;
	}

	.load-more {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 210rpx;

		img {
			width: 320rpx;
			height: 320rpx;
			margin-bottom: 95rpx;
		}
	}
</style>
